<template>
	<view class="page-content">
		<view class="type-list" v-for="(item,index) in typeList" :key="index">
			<view class="name">
				{{item.title}}
			</view>
			<view class="edit" @click="opentypeInput('edit',item.id,item.title)">
				修改
			</view>
			<view class="del" @click="delType(item.id)">
				删除
			</view>
		</view>
		<view class="bt-btn">
			<view @click="opentypeInput('add')">新增分类</view>
		</view>
		<uni-popup ref="typeInput" type="dialog">
			<uni-popup-dialog mode="input" title="新增分类" @confirm="confirm(inputValue)">
				<uni-easyinput v-model="inputValue" focus placeholder="请输入分类名称"></uni-easyinput>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				typeList: [],
				busId: null,
				inputValue: "",
				addEdit: "",
				editId: null
			}
		},
		onLoad(e) {
			this.busId = e.id;
		},
		onShow() {
			this.getType();
		},
		methods: {
			getType() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getOfflineBusinessGoodsCategoryList',
					method: 'POST',
					data: {
						offlineBusinessId: this.busId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data && res.data.data) {
							this.typeList = res.data.data;
						} else {
							this.typeList = [];
						}
					}
				});
			},
			addType(title) {
				let url;
				if (this.addEdit == 'add') {
					url = '/UserMiniProgramController/addOfflineBusinessCategory'
				} else {
					url = "/UserMiniProgramController/updateOfflineBusinessCategory";
				}
				uni.request({
					url: app.globalData.serviceUrl + url,
					method: 'POST',
					data: {
						key: uni.getStorageSync('userKey'),
						offline_business_id: this.busId,
						category_id: this.editId,
						title: title
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.state == 1) {
							this.getType();
						} else if (res.data.state == 2) {
							uni.navigateTo({
								url: '../../../login/index'
							});
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.notice
							})
						}

					}
				});
			},
			delType(id) {
				uni.showModal({
					title: '提示',
					content: '您确定删除改分类？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: app.globalData.serviceUrl +
									'/UserMiniProgramController/deleteOfflineBusinessCategory',
								method: 'POST',
								data: {
									key: uni.getStorageSync('userKey'),
									offline_business_id: this.busId,
									category_id: id
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if (res.data.state == 1) {
										this.getType();
									} else if (res.data.state == 2) {
										uni.navigateTo({
											url: '../../../login/index'
										});
									} else {
										uni.showToast({
											icon: "none",
											title: res.data.notice
										})
									}

								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			opentypeInput(type, id, title) {
				this.addEdit = type;
				this.inputValue = "";
				if (id) {
					this.editId = id;
					this.inputValue = title;
				}
				this.$refs.typeInput.open()
			},
			confirm(e) {
				this.addType(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100vh;
		padding-bottom: 100px;
		overflow-y: scroll;
		background: rgba(242, 243, 248, 1);
	}

	.type-list {
		display: flex;
		line-height: 50px;
		border-bottom: 1px solid #eee;
		padding: 0 15px;

		.name {
			flex: 1 1 0;
		}

		.edit {
			flex: 0 0 50px;
			text-decoration: underline;
		}

		.del {
			flex: 0 0 50px;
			text-decoration: underline;
		}
	}

	.bt-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;

		view {
			padding: 5px 15px;
			background: #333;
			color: #fff;
			border-radius: 5px;
			font-size: 16px;
		}
	}
</style>
